<template>
  <div>
    <h1>商品添加页</h1>
    <el-form>
      <el-form-item label="商品名称"
        ><el-input
          style="width: 300px"
          v-model="list.user"
          placeholder="请输入商品名称"
        ></el-input
      ></el-form-item>
      <el-form-item label="商品描述"
        ><el-input
          style="width: 300px"
          v-model="list.commit"
          placeholder="请输入商品描述"
        ></el-input
      ></el-form-item>
      <el-form-item label="商品价格"
        ><el-input
          style="width: 300px"
          v-model="list.price"
          placeholder="请输入商品价格"
        ></el-input
      ></el-form-item>
      <el-form-item label="商品库存"
        ><el-input
          style="width: 300px"
          v-model="list.num"
          placeholder="请输入商品库存"
        ></el-input
      ></el-form-item>
      <el-form-item>
        <span>所属分类</span>
        <el-select v-model="from" placeholder="请选择一级品类" @change="getson">
          <el-option
            :label="item.name"
            :value="item.id"
            v-for="(item, index) in cateList"
            :key="index"
          ></el-option>
        </el-select>
        <el-select v-model="form" placeholder="请选择二级品类">
          <el-option
            :label="item.name"
            :value="item.id"
            v-for="(item, index) in cateLists"
            :key="index"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="上传图片">
        <el-upload
          action="/api/product/upload.do"
          :on-success="handleAvatarSuccess"
          list-type="picture"
          :auto-upload="true"
          name="upload_file"
          :limit="1"
        >
          <el-button size="small" type="primary">点击上传</el-button>
        </el-upload>
      </el-form-item>
      <el-form-item label="商品描述">
        <quill-editor v-model="list.details"> </quill-editor>
      </el-form-item>
    </el-form>
    <el-button @click="addGoods" type="success" style="width: 40%"
      >添加</el-button
    >
  </div>
</template>
<script>
import { goods_add,goods_cate, goods_cates } from "@/api/api";
export default {
  name: "",
  components: {},
  props: [],
  data() {
    return {
      list: {
        commit: "",
        categoryId: "",
        user: "",
        price: "",
        num: "",
        img: "",
        details: "",
      },
      cateList: [],
      cateLists: [],
      form:'',
      from:'',
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.getcate();
  },
  methods: {
    async addGoods() {
      const { data: res } = await goods_add(
        `/api/product/save.do?categoryId=${this.from}&name=${this.list.user}&subtitle=${this.list.commit}&subImages=${this.list.img}&detail=${this.list.details}&price=${this.list.price}&stock=${this.list.num}&status=1`
      );
      this.$message.success(res.data);
      this.$router.push("/goodslist");
    },
    handleAvatarSuccess(response) {
      this.list.img = response.data.uri;
    },
        // 品类获取
    async getcate() {
      const res = await goods_cate();
        this.cateList = res.data.data;
    },
    async getson(id) {
      const { data: res } = await goods_cates(id);
      console.log(res);
      this.cateLists = res.data;
    },
  },
};
</script>
<style scoped>
</style>